<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{this.currentCity}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper"
                        v-for="item of hot"
                        :key="item.id"
                        @click="handleCityClick(item.name)"
                        >
                        <div class="button">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list"
                    v-for="innerItem of item"
                    :key="innerItem.id"
                    @click="handleCityClick(innerItem.name)"
                    >
                    <div class="item border-bottom">{{innerItem.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'

export default {
    name: 'CityList',
    props: {
        hot: Array,
        cities: Object,
        letter: String
    },
    watch: {
        // 侦听，当letter变化时触发
        letter () {
            if (this.letter) {
                // 用ref获取点击的值
                // 注意循环中打印的ref返回一个数组，
                const element = this.$refs[this.letter][0]
                // console.log(element)
                // 滚动到特定位置，scroll插件提供的方法，参数为一个dom元素或选择器
                this.scroll.scrollToElement(element)
            }
        }
    },
    methods: {
        /**  表示有一个mutation叫changeCity，
         * 使用mapMutation将 这个映射到本组件中一个叫changeCity的方法中
         * 仅限commit方法，dispatch不行 */
        ...mapMutations['changeCity'],
        handleCityClick (city) {
            this.$store.dispatch('changeCity', city)
            this.$router.push('/')
        }
    },
    mounted () {
        this.scroll = new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
    },
    computed: {
        // vuex提供的API，可以直接将vuex中的数据直接映射到computed属性中
        // 参数可以写数组，也可以对象
        ...mapState({
            /* 示将vuex中的city映射到computed，
            映射过来名字叫currentCity,调用直接调用this.currentCity */
            currentCity: 'city'
        })
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .border-topbottom
        // 指定前面和后面的元素边框颜色
        &:brfore
            border-color: gray
        &:after
            border-color: gray
    .border-bottom
        // 指定前面和后面的元素边框颜色
        &:brfore
            border-color: black
    .list
        position: absolute
        top: 1.58rem
        left: 0
        right: 0
        bottom: 0
        overflow: hidden
        .title
            line-height: .54rem
            background: #eee
            padding-left: .2rem
            color: #666
            font-size: .26rem
        .button-list
            padding: .1rem .6rem .1rem .1rem
            overflow: hidden
            .button-wrapper
                float: left
                width: 33.33%
                .button
                    margin: .1rem
                    padding: .15rem 0
                    text-align: center
                    border: .02rem solid #ccc
                    border-radius: .06rem
        .item-list
            .item
                line-height: .76rem
                padding-left: .2rem
</style>
